<template>
  <div class="index">
    <header>
      <div class="pre">
        <img src="../assets/images/background.png" alt="" />
        <el-button
          :type="activeName === 'home' ? 'primary' : 'info'"
          link
          @click="activeNameChange('home')"
          >Home</el-button
        >
        <el-button
          :type="activeName === 'aboutUs' ? 'primary' : 'info'"
          link
          @click="activeNameChange('aboutUs')"
          >About us</el-button
        >
      </div>
      <div
        class="input_box"
        v-show="activeName === 'aboutUs' ? !isPhone : true"
      >
        <Search
          class="Search"
          style="width: 1em; height: 1em; margin-right: 8px; color: #f2f2f2"
        />
        <el-input
          v-model="search"
          placeholder="Please input"
          class="input-with-select"
          @keyup.enter="searchChange"
        >
        </el-input>
        <!-- <span class="input-text">state</span> -->
        <ArrowDownBold
          class="ArrowDownBold"
          @click="showSearchClick"
          style="
            width: 1em;
            height: 1em;
            margin-right: 8px;
            color: #f2f2f2;
            cursor: pointer;
          "
        />
        <div class="search-info" v-if="showSearch">
          <div class="select-box" v-if="!showSearchList">
            <!-- 州 -->
            <el-select
              v-model="continent"
              class="m-2"
              value-key="id"
              clearable
              @change="selectChange('continent')"
              placeholder="请选择"
              size="large"
            >
              <el-option
                v-for="item in continentList"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
            <!-- 州中心 -->
            <el-select
              v-if="
                !onlyCountry_continent
                  .map((v) => v.id)
                  .includes(continent.id) && continent.id
              "
              v-model="continentArea"
              class="m-2"
              value-key="id"
              clearable
              placeholder="请选择"
              size="large"
              @change="continentAreaChange"
            >
              <el-option
                v-for="item in continentAreaList"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
            <!-- 国家 -->
            <el-select
              v-model="country"
              value-key="id"
              class="m-2"
              clearable
              placeholder="请选择"
              v-if="country.id"
              @change="countryChange"
              size="large"
            >
              <el-option
                v-for="item in countryList"
                :key="item.value"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </div>
          <div class="info-box">
            <p class="title">{{ title }}</p>
            <div class="info-content">
              <div
                :class="['info-content_item', searchInfoType]"
                v-for="(item, i) in cur_list"
                :key="i"
                @click="clickCountry(item)"
              >
                <img
                  class="info-content_item-img"
                  :src="`https://lycm-food.oss-cn-chengdu.aliyuncs.com/school/${item.picture}`"
                  alt=""
                />
                <span
                  style="padding: 0 0 0 3px"
                  class="title_"
                  :title="item.NameEn"
                  >{{ item.NameEn }}</span
                >
                <span
                  class="budge"
                  v-if="searchInfoType === 'country'"
                  v-show="item.schoolNum > 0"
                  >{{ item.schoolNum }}</span
                >
              </div>
            </div>
          </div>
          <!-- 页码 -->
          <div class="page" v-if="!isPhone">
            <div>
              <span
                @click="pageChange(i)"
                :class="['page-item', i === current ? 'active' : '']"
                v-for="(item, i) in Array(
                  Math.ceil(
                    (searchInfoType === 'country' ? countryList : schoolAllList)
                      .length / 24
                  )
                )"
                :key="i"
              ></span>
            </div>
          </div>
        </div>
      </div>
      <div class="hou">
        <!-- <el-button type="plain">Log in</el-button>
        <el-button type="info">Start free trail</el-button> -->
      </div>
    </header>
    <main>
      <aboutUs v-show="activeName === 'aboutUs'" />
      <div class="imgBox" v-show="activeName !== 'aboutUs'">
        <!-- <img src="../assets/images/all.png" alt="" /> -->
        <mapCom
          class="map"
          :isPhone="isPhone"
          :data="zhouList"
          @clickArea="clickArea"
          ref="refMap"
        />
      </div>
    </main>

    <countryDialog
      v-model="dialogVisible"
      :isPhone="isPhone"
      :formData="formData_country"
      @clickSchool="ClickGetSchoolInfo"
      @update:model-value="
        (newValue) => ((dialogVisible = newValue), refMap.unselect())
      "
    />

    <schoolInfo
      v-model="infoVisible"
      :formData="formData_school"
      @update:model-value="(newValue) => (infoVisible = newValue)"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
// import inobounce from 'inobounce'
import countryDialog from '@/components/countryDialog.vue'
import schoolInfo from '@/components/schoolInfo.vue'
import mapCom from '@/components/map/index.vue'
import aboutUs from './aboutUs.vue'
import {
  areaInfoQueryList,
  schoolList,
  getSchoolInfo,
  queryListAndSchoolTotal,
} from '@/api/home'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
let search = ref('')
let continent = ref({}) // 州值
let continentArea = ref({}) // 分区州值
let country = ref({}) // 国家值
let formData_country = ref([])
let formData_school = reactive({}) //学校详情
let current = ref(0)
let showSearch = ref(false) // 展示搜索框 带选项
let showSearchList = ref(false) // 展示搜索框
let dialogVisible = ref(false)
let infoVisible = ref(false)
let searchInfoType = ref('shcool') // 可选值 country shcool
let continentList = ref([]) // 州
let allData = ref([])
let schoolAllList = ref([])
let areaSchoolList = ref([])
let activeName = ref('home')
let refMap = ref()
let isPhone = ref(false)
// 初始化
onMounted(() => {
  const dom = document.body.clientWidth
  isPhone.value = dom < 1000
})

// let u = navigator.userAgent
// if (u.indexOf('iPhone') > -1) {
//   inobounce.enable()
//   console.log('inobounce', inobounce.isEnabled())
// }

let activeNameChange = (val) => {
  activeName.value = val
  showSearch.value = false
  dialogVisible.value = false
  infoVisible.value = false
}
let zhouList = ref([
  {
    id: 1,
    name: '亚洲',
    className: 'yazhou',
    schoolList: [],
  },
  {
    id: 2,
    name: '欧洲',
    className: 'ouzhou',
    schoolList: [],
  },
  {
    id: 3,
    name: '非洲',
    className: 'feizhou',
    schoolList: [],
  },
  {
    id: 4,
    name: '大洋洲',
    className: 'dayangzhou',
    schoolList: [],
  },
  {
    id: 5,
    name: '北美洲',
    className: 'beimeizhou',
    schoolList: [],
  },
  {
    id: 6,
    name: '拉丁美洲',
    className: 'meizhou',
    schoolList: [],
  },
])
// 获取各大洲学校
const getQueryListAndSchoolTotal = () => {
  queryListAndSchoolTotal().then((res) => {
    areaSchoolList.value = res.data.schoolInfo
    setTimeout(() => {
      zhouList.value = JSON.parse(JSON.stringify(zhouList.value)).map((v) => {
        // const obj
        return {
          ...v,
          schoolList: areaSchoolList.value.filter(
            (t) => t.continentId === v.id
          ),
        }
      })
    })
  })
}
getQueryListAndSchoolTotal()
const pageChange = (val) => {
  current.value = val
}
// 点击下拉
const showSearchClick = (val) => {
  showSearch.value = !showSearch.value
  current.value = 0
  showSearchList.value = false
  dialogVisible.value = false
  infoVisible.value = false
  continent.value = {}
  continentArea.value = {}
  country.value = {}
  searchInfoType.value = 'country'
}

// input搜索
const searchChange = (val) => {
  dialogVisible.value = false
  infoVisible.value = false
  if (!search.value) {
    schoolAllList.value = []
    return
  }
  schoolList({
    chinaName: search.value,
  }).then((res) => {
    schoolAllList.value = res.data.map((v) => {
      return {
        ...v,
        NameEn: v.chinaName,
        picture: v.schoolePicure,
      }
    })
    searchInfoType.value = 'shcool'
    showSearch.value = true
    showSearchList.value = true
  })
}

const clickArea = (params) => {
  showSearch.value = false
  infoVisible.value = false
  const val = params.data.id
  let arr, arrList, isCountry_continent
  isCountry_continent = onlyCountry_continent.value
    .map((v) => v.id)
    .includes(val)
  // 找出所有的国家
  const arrCountry = allData.value.filter((v) => {
    return v.countryFlag === 'Y'
  })
  if (isCountry_continent) {
    // 州作为父级
    arr = arrCountry.filter((v) => {
      return val === v.parentId
    })
  } else {
    // 区作为父级
    arrList = allData.value
      .filter((v) => {
        return v.areaDeep === 2 && v.parentId === val && v.countryFlag !== 'Y'
      })
      .map((t) => t.id)
    // 找到州下所有的 地区id 为了展示该州所有国家
    arr = arrCountry.filter((v) => {
      return arrList.includes(v.parentId)
    })
  }
  formData_country.value = arr
  dialogVisible.value = true
}
// 州改变
const continentAreaChange = (val) => {
  searchInfoType.value = 'country'
  country.value = {}
}

// 地区改变
const selectChange = (type) => {
  if (type === 'continent') {
    continentArea.value = {}
    country.value = {}
    searchInfoType.value = 'country'
  }
}

const countryChange = (val) => {
  if (!val) {
    searchInfoType.value = 'country'
  } else {
    schoolList({
      areaId: val.id,
    }).then((res) => {
      let arr = res.data.map((v) => {
        return {
          ...v,
          NameEn: v.chinaName,
          picture: val.picture,
        }
      })
      schoolAllList.value = arr
      searchInfoType.value = 'shcool'
    })
  }
}

const clickCountry = (val) => {
  // 点击国家
  if (searchInfoType.value === 'country') {
    if (!val.schoolNum || val.schoolNum === 0) {
      ElMessage({
        type: 'warning',
        message: '所选国家暂无合作学校',
      })
      return
    }
    country.value = val
    schoolList({
      areaId: val.id,
    }).then((res) => {
      let arr = res.data.map((v) => {
        return {
          ...v,
          NameEn: v.chinaName,
          picture: v.schoolePicure,
        }
      })
      schoolAllList.value = arr
      searchInfoType.value = 'shcool'
    })
  } else {
    // 点击学校
    ClickGetSchoolInfo(val)
  }
}

// 获取学校信息
const ClickGetSchoolInfo = (val) => {
  // showSearch.value = false
  getSchoolInfo({
    id: val.id,
  }).then((res) => {
    formData_school = {
      ...res.data,
    }
    infoVisible.value = true
  })
}

// 州中心
let continentAreaList = computed(() => {
  const arr = allData.value.filter((v) => {
    return (
      v.areaDeep === 2 &&
      continent.value.id === v.parentId &&
      v.countryFlag !== 'Y'
    )
  })
  return arr
})

// 各个国家列表
// let countryList = computed(() => {
//   let arr
//   const arrList = allData.value
//     .filter((v) => {
//       return v.areaDeep === 2 && v.parentId === continent.value.id
//     })
//     .map((t) => t.id)
//   if (!continentArea.value.id && continent.value.id) {
//     arr = allData.value.filter((v) => {
//       return v.areaDeep === 3 && arrList.includes(v.parentId)
//     })
//   } else {
//     arr = allData.value.filter((v) => {
//       return v.areaDeep === 3 && continentArea.value.id === v.parentId
//     })
//   }
//   return arr
// })

// 只有国家的大洲
let onlyCountry_continent = computed(() => {
  let arr
  // 找出第二层为国家的 国家 的parentId
  const onlyCountry_continent_IdList = allData.value
    .filter((v) => {
      return v.countryFlag === 'Y' && v.areaDeep === 2
    })
    .map((v) => v.parentId)
  arr = allData.value.filter((v) => {
    return onlyCountry_continent_IdList.includes(v.id)
  })
  return arr
})

let countryList = computed(() => {
  let arr, arrList, isCountry_continent
  isCountry_continent = onlyCountry_continent.value
    .map((v) => v.id)
    .includes(continent.value.id)
  // 找出所有的国家
  const arrCountry = allData.value.filter((v) => {
    return v.countryFlag === 'Y'
  })
  if (isCountry_continent) {
    // 州作为父级
    arr = arrCountry.filter((v) => {
      return continent.value.id === v.parentId
    })
  } else {
    // 区作为父级
    arrList = allData.value
      .filter((v) => {
        return (
          v.areaDeep === 2 &&
          v.parentId === continent.value.id &&
          v.countryFlag !== 'Y'
        )
      })
      .map((t) => t.id)
    // 找到州下所有的 地区id 为了展示该州所有国家
    if (!continentArea.value.id && continent.value.id) {
      arr = arrCountry.filter((v) => {
        return arrList.includes(v.parentId)
      })
    } else {
      arr = arrCountry.filter((v) => {
        return continentArea.value.id === v.parentId
      })
    }
  }
  return arr
})

let cur_list = computed(() => {
  let arr =
    searchInfoType.value === 'country' ? countryList.value : schoolAllList.value
  return isPhone.value
    ? arr
    : arr.slice(current.value * 24, (current.value + 1) * 24)
})

let title = computed(() => {
  return searchInfoType.value === 'country' ? '国家' : '学校中文名'
})

// 获取所有数据
const getList = () => {
  areaInfoQueryList().then((res) => {
    allData.value = JSON.parse(JSON.stringify(res.data))
    continentList.value = allData.value.filter((v) => {
      return v.areaDeep === 1
    })
  })
}
getList()
</script>

<style lang="scss">
.index {
  width: 100%;
  height: 100%;
  position: relative;
}
header {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  background: linear-gradient(90deg, #ffffff 31%, #bffaff 100%);
  display: flex;
  padding: 10px 20px;
  position: relative;
  align-items: center;
  justify-content: space-between;
  .el-button {
    margin-left: 20px;
  }
  .pre {
    width: 25%;
    text-align: left;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      border-radius: 100%;
    }
  }
  .hou {
    width: 25%;
    text-align: right;
  }
  .input_box {
    flex: 1;
    position: relative;
    z-index: 1000;
    .input-with-select {
      border: none;
      .el-input__wrapper {
        border-radius: none;
        background-color: rgb(13, 24, 24);
        box-shadow: none;
        padding-left: 50px;
        padding-right: 100px;
        .el-input__inner {
          color: #f2f2f2;
        }
      }
    }
    .Search {
      position: absolute;
      left: 10px;
      top: 8px;
      z-index: 1;
    }
    .input-text {
      position: absolute;
      color: #f2f2f2;
      right: 50px;
      top: 5px;
      z-index: 1;
    }
    .ArrowDownBold {
      position: absolute;
      right: 10px;
      top: 8px;
      z-index: 1;
    }
    .search-info {
      width: 100%;
      height: 600px;
      padding: 20px 15px;
      position: absolute;
      top: 30px;
      background-color: rgba(21, 29, 30, 0.95);
      opacity: 1;
      box-sizing: border-box;
      .select-box {
        width: 100%;
        height: 40px;
        // display: flex;
        // justify-content: space-between;
        /* 去除边框 */
        :deep(.el-select .el-input__wrapper) {
          box-shadow: none !important;
        }
        /* 去除选中时蓝色边框（下面两个都要加上） */
        :deep(.el-input .el-input__wrapper.is-focus) {
          box-shadow: none !important;
        }
        :deep(.el-select .el-input.is-focus .el-input__wrapper) {
          border-color: #dcdfe6 !important;
          box-shadow: none !important;
        }
        .el-select {
          --el-select-input-focus-border-color: none;
          .el-input__inner {
            color: #f2f2f2;
          }
        }
        .m-2 {
          width: 160px;
          height: 40px;
          border: none;
          .is-focus {
            border: none;
            box-shadow: none;
          }
          .el-input__wrapper {
            background-color: rgba(10, 10, 10, 0);
            box-shadow: none;
          }
        }
      }
      .info-box {
        width: 100%;
        width: 100%;
        height: 480px;
        box-sizing: border-box;
        margin-top: 10px;
        .title {
          height: 30px;
          line-height: 30px;
          margin: 0;
          font-size: 14px;
          font-family: Poppins-Regular, Poppins;
          font-weight: 400;
          color: #8f8f8f;
          text-align: left;
        }
        .info-content {
          display: flex;
          justify-content: flex-start;
          align-content: flex-start;
          flex-wrap: wrap;
          width: 100%;
          height: calc(100% - 30px);
          &_item {
            margin-right: calc(10% / 6);
            cursor: pointer;
            position: relative;
            .budge {
              position: absolute;
              top: -9px;
              // right: 2px;
              left: 100px;
              display: inline-block;
              width: 20px;
              height: 20px !important;
              border-radius: 100%;
              border: 1px solid #ecf0f3;
              background-color: red;
              color: #ecf0f3 !important;
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              // visibility: hidden;
            }
          }
          .country {
            width: 15%;
            height: 25%;
            text-align: left;
            img {
              // width: 100%;
              height: 80px;
              border-radius: 8px 8px 8px 8px;
            }
            span {
              display: inline-block;
              height: 30px;
              color: #ecf0f3;
            }
            .title_ {
              width: 100%;
            }
          }
          .shcool {
            width: 15%;
            height: calc(100% / 12);
            display: flex;
            align-items: center;
            img {
              width: 20px;
              height: 20px;
              border-radius: 100%;
            }
            span {
              display: inline-block;
              color: #ecf0f3;
              margin-left: 8px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          &_item:hover {
            span {
              color: #00b5c2;
            }
            .budge {
              visibility: visible;
              display: inline-block !important;
            }
          }
        }
      }
      .page {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        div {
          display: flex;
          .page-item {
            display: block;
            width: 13px;
            height: 13px;
            background-color: #646464;
            border-radius: 100%;
            margin-left: 8px;
            cursor: pointer;
          }
          .page-item:hover {
            background-color: #fff;
          }
          .active {
            background-color: #fff;
          }
        }
      }
    }
  }
}
main {
  width: 100%;
  height: calc(100% - 60px);
  background-color: rgb(13, 24, 24);
  display: flex;

  justify-content: space-evenly;
  align-items: center;
  // padding: 187px 193px 120px 243px;
  .imgBox {
    width: 100%;
    height: 100%;
    // width: 1500px;
    // height: 800px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      // width: 80%;
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      cursor: pointer;
    }
    .dayangzhou {
      background-color: #ee66a7;
      top: 560px;
      left: 1220px;
    }
    .feizhou {
      background-color: #ee66a7;
      top: 400px;
      left: 800px;
    }
    .beimeizhou {
      background-color: #1ecef7;
      top: 280px;
      left: 330px;
    }
    .meizhou {
      background-color: #fdbd0e;
      top: 540px;
      left: 530px;
    }
    .ouzhou {
      background-color: #fdbd0e;
      top: 220px;
      left: 1000px;
    }
    .yazhou {
      background-color: #1ecef7;
      top: 330px;
      left: 1100px;
    }
  }

  // img:hover {
  //   box-shadow: -4px 13px 16px 8px rgba(141, 141, 141, 0.3);
  // }
  // .dayangzhou {
  //   width: 400px;
  //   height: 380px;
  //   cursor: pointer;
  // }
}
.cur-popover {
  // background: rgba(3, 30, 35, 0.97) !important;
  // box-shadow: -4px 13px 16px 8px rgba(141, 141, 141, 0.3) !important;
  // border: none !important;
  span {
    margin-left: 5px;
  }
  p {
    margin-left: 5px;
  }
}
// @media screen and (min-width:700px) and (max-width:1200px) {

// }
@media screen and (max-width: 1000px) {
  .index {
    width: 100%;
    height: 100%;
    // overflow: auto;
    overflow-y: auto;
  }
  header {
    .input_box {
      position: absolute;
      top: 76px;
      width: 90%;
      left: 5%;
      height: 32px;
      background: #2e4e50;
      border-radius: 10px;
      .input-with-select {
        .el-input__wrapper {
          background-color: #2e4e50;
          .el-input__inner {
            color: #ecf0f3;
          }
        }
      }
      .search-info {
        .m-2 {
          width: 32% !important;
        }
      }
      .search-info {
        // height: auto !important;
        // max-height: calc(100vh - 200px) !important;
        height: 700px !important;
        min-height: 550px !important;
        height: 80% !important;
        border-radius: 8px;
        overflow: auto;
        top: 34px !important;
        .country {
          width: 31% !important;
          margin-right: 2% !important;
          text-align: center !important;

          img {
            height: 60px !important;
          }
          .budge {
            left: calc(100% - 24px) !important;
          }
        }
        .shcool {
          width: calc(50% - 5px) !important;
          margin-right: 5px !important;
          .title_ {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
